<template>
  <div class="admin-page">
    <nav class="sidebar">
      <div class="sidebar-header">
        <h3>奖学金管理</h3>
      </div>

      <ul class="list-group">
<!--        <li class="list-group-item"><router-link to="/users">用户管理</router-link></li>-->
<!--        <li class="list-group-item"><router-link to="/products">产品管理</router-link></li>-->
<!--        <li class="list-group-item"><router-link to="/orders">订单管理</router-link></li>-->
        <li class="list-group-item"><router-link to="/">注销</router-link></li>
      </ul>
    </nav>
    <main class="main-content">
      <div class="student-table">
        <h2>获奖学生列表</h2>

        <div class="grade-selector">
          <label for="gradeSelector">选择年级:</label>
          <select id="gradeSelector" v-model="selectedGrade" @change="filterStudentsByGrade">
            <option value="">所有年级</option>
            <option value="1">研一</option>
            <option value="2">研二</option>
            <option value="3">研三</option>
          </select>
        </div>

        <table>
          <thead>
          <tr>
            <th style="color: #ffffff; background-color: #a42a2a;">姓名</th>
            <th style="color: #ffffff; background-color: #a42a2a;">年级</th>
            <th style="color: #ffffff; background-color: #a42a2a;">分数</th>
          </tr>
          </thead>

          <tbody>
          <tr v-for="(student, index) in students" :key="index">
            <td>{{ student.name }}</td>
            <td>{{ student.grade }}</td>
            <td>{{ student.award }}</td>
          </tr>
          </tbody>

      <div class="button-group-right">
        <button @click="editStudent">修改</button>
        <button @click="deleteStudent">删除</button>
        <button @click="addStudent">新增</button>
      </div>

        </table>
      </div>
    </main>
<!--    <main class="main-content">-->
<!--      <router-view></router-view>-->
<!--    </main>-->
  </div>
</template>


<script>
export default {
  name: 'AdminPage',

data() {
  return {
    selectedGrade: '',
    students: [
      { name: '张三', grade: '大二', award: '98' },
      { name: '李四', grade: '大三', award: '23' },
      { name: '王五', grade: '大一', award: '45' },
      { name: '张三', grade: '大二', award: '65' },
      { name: '李四', grade: '大三', award: '42' },
      { name: '王五', grade: '大一', award: '65' },
    ],
    // ... 之前的data保持不变 ...
    selectedStudent: null, // 用于存储被选中的学生信息，以便编辑
  };
},
  methods: {
    editStudent() {
      // 实现修改学生的逻辑
      console.log('修改学生功能被触发');
      // 这里可以打开一个模态框供用户编辑信息，或者直接操作当前选中的学生数据
    },
    deleteStudent() {
      // 实现删除学生的逻辑
      console.log('删除学生功能被触发');
      // 确认操作后，可以发送请求到后端删除学生信息
    },
    addStudent() {
      // 实现新增学生的逻辑
      console.log('新增学生功能被触发');
  },
},

}

</script>

<style scoped lang="scss">

.button-group-right {
  display: flex; /* 使用Flex布局 */
  justify-content: flex-end; /* 水平居右 */
  gap: 10px; /* 按钮间间距 */
  position: absolute; /* 设置按钮组为绝对定位 */
  bottom: -30px; /* 定位到表格底部 */
  right: 0; /* 定位到表格右侧 */
}

.student-table {
  position: relative;
  width: 100%;
  margin-top: 20px;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
th {
  /* 保持表头颜色样式 */
}
tr:nth-child(even) {
  background-color: #f2f2f2; /* 为偶数行添加浅灰色背景 */
}



.admin-page {
  display: flex;
  height: 100vh;
}
h3{
  text-align: left;
  font-size: 1.5em;
  font-weight: 400;
  margin-top: -3%;
  transform: translateX(30px);
}
.sidebar {
  width: 200px;
  background-color: #a42a2a;
  color: white;
  padding: 20px 0;
}

.sidebar-header, .list-group-item {
  padding: 10px;
}

.sidebar-header h3 {
  margin-bottom: 0;
}

.list-group-item a {
  color: white;
  text-decoration: none;
}

.list-group-item a:hover {
  text-decoration: underline;
}

.main-content {
  flex-grow: 1;
  padding: 20px;
  overflow: auto;
}
</style>